NetPay
Sistema de diseño · v0.1 simplificado

Fundamentos de marca NetPay

Un conjunto mínimo de tokens, tipografía y componentes derivado del sitio público de NetPay y de sus activos de marca en línea. Suficiente para construir producto, documentación y material de propuesta con una sola voz visual.

netpay.mx Spin · FEMSA #116EF0
Principio

Azul para la acción, gris para todo lo demás

NetPay opera en un contexto de dinero: la claridad pesa más que la expresión. El lienzo es gris cálido y blanco, la estructura es azul marino profundo, y el azul de marca aparece solo donde el usuario debe actuar o donde un dato exige lectura inmediata. Si dos elementos azules compiten en una pantalla, uno de los dos está mal.

70%Neutros — lienzo #F7F7F7 y superficies blancas.
20%Estructura — navegación, encabezados y pies en azul marino.
10%Azul NetPay — CTA, enlaces activos, foco y métricas clave.
Color
Azul NetPay#116EF0Acción primaria, enlaces, foco
Azul profundo#0B4FB5Estado presionado
Azul claro#4A8FF7Hover, texto sobre fondo oscuro
Azul hielo#E7F0FERelleno de badges y filas activas
Teal soporte#00778FSegunda serie en gráficas, nunca CTA
Marino#0B1B33Estructura, texto principal
Pizarra#4A5A70Texto secundario
Arena#F7F7F7Lienzo por defecto
Éxito · #12864FPago aprobado, conciliación completa
Atención · #9A6A00Pendiente de revisión o documentación
Error · #C0271ARechazo, contracargo, validación fallida
Tipografía
Display · Manrope 700/800Cobra mejor, opera con control
Cuerpo · DM Sans 300/400/500Optimiza, controla y escala tus cobros con soluciones de pago digital. El cuerpo se escribe en peso 300 para textos largos y 400 para interfaz; el 500 se reserva a etiquetas y botones.
Datos · JetBrains Mono 400/500$ 1,284,930.50 MXN · TXN-0092841
H144 / 1.05
H232 / 1.15
H322 / 1.3
Cuerpo16 / 1.6
Etiqueta13 / 1.4

Nota de sustitución: el sitio público no expone una fuente corporativa declarada. Manrope y DM Sans se proponen por afinidad geométrica con el logotipo; si existe una tipografía oficial en el manual de marca, se reemplaza sin tocar el resto del sistema.

Componentes
Botones
Insignias de estado
En proceso Aprobado Pendiente Rechazado
Campo de formulario
Se usa para asignar la tabla de tasas del comercio.
Transacciones hoy18,402↑ 6.2% vs. ayer
Volumen$4.1MMXN liquidados
Tasa de aprobación96.8%Últimos 30 días
ComercioFolioMontoEstado
Abarrotes del NorteTXN-0092841$12,480.00Aprobado
Farmacias VidaTXN-0092842$3,150.75En proceso
Gasolinera Sur 44TXN-0092843$890.00Rechazado
Forma y ritmo
Radios
4 chips · 8 botones e inputs · 12 tarjetas · full solo en píldoras y avatares.
Espaciado
Retícula de 4 px: 4 · 8 · 16 · 24 · 32 · 64. Padding de tarjeta 24, de sección 64.
Elevación
Sombras frías y bajas. En superficies marino la elevación se expresa con borde, no con sombra.
Reglas
Sí Un solo botón primario por pantalla o sección. Montos y folios siempre en mono, alineados a la derecha en tablas. Azul de marca sobre blanco solo como relleno de botón o icono, no como texto corrido. Foco visible: borde azul de 1 px más halo hielo de 3 px.
No Fondos completos en azul de marca fuera de un cierre de página. Degradados azul-teal: los dos azules nunca se mezclan. Emoji o iconos rellenos; la iconografía es de línea, 1.5 px, currentColor. Texto blanco sobre teal #00778F por debajo de 16 px.

Origen: paleta y logotipo tomados de netpay.mx y de su registro público de marca (#116EF0, #F7F7F7, #00778F). Los neutros marino y pizarra, los tonos de estado y la escala tipográfica son derivaciones para uso interno, no valores oficiales del manual de marca.